<template>
  <van-overlay
    :custom-style="{ background: '#1a2e38b3' }"
    :show="showLayer"
    @click="
      showLayer = false;
      showClose = false;
      step = 1;
    "
    :lock-scroll="true"
    duration="0"
    z-index="100"
  >
    <div
      v-if="showLayer"
      class="layerCon bg-[#0f212e] p-4 text-[#b1bad3] text-sm font-semibold rounded"
      @click.stop=""
      ref="layerCon"
    >
      <!-- 搜索建议 -->
      <div v-if="step == 1">
        <p class="p-2 text-center w-full">{{ $t("layer.search.atleast") }}</p>
        <div class="flex justify-between mt-4">
          <span>{{ $t("layer.search.RecentSearches") }}</span>
          <span @click="clearTag" class="hover:text-white cursor-pointer"
            >{{ $t("layer.search.ClearSearch") }}({{ tagList.length }})</span
          >
        </div>
        <div class="flex flex-wrap">
          <div class="tag items-center mt-2" v-for="(item, i) in tagList">
            <p
              class="hover:text-white text-xs mx-2 cursor-pointer"
              @click="goToSearch(item)"
            >
              {{ item }}
            </p>
            <van-icon
              @click="closeTag(i)"
              size="14px"
              class="text-gray-400 hover:text-gray-200 cursor-pointer"
              name="cross"
            />
          </div>
        </div>
      </div>
      <!-- 骨架屏 -->
      <van-skeleton v-else-if="step == 2" class="my-4">
        <!-- <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image class="mr-4 w-[157px] h-[210px] rounded" />
            <van-skeleton-image class="mr-4 w-[157px] h-[210px] rounded" />
            <van-skeleton-image class="w-[157px] h-[210px] rounded" />
          </div>
        </template> -->
      </van-skeleton>
      <!-- 游戏 -->
      <div v-else-if="step == 3">
        <gameBox :games="games" />
      </div>
    </div>
  </van-overlay>

  <div
    class="search mb-4 relative"
    ref="iptCon"
    :style="showLayer ? 'z-index:1005' : ''"
  >
    <div
      class="w-full relative flex px-4 py-1 rounded-full bg-[#0f212e] border-[#2f4553] border-[2px] items-center cursor-pointer"
      :class="showLayer ? 'border-[#557086]' : ''"
    >
      <svg-icon name="搜索" class="text-[#557086] text-[16px]" />
      <el-input
        id="search_ipt"
        class="text-white bg-[#0f212e]"
        type="text"
        autocomplete="off"
        @focus="clickInput"
        v-model="ipt_val"
        @input="searchGame"
        maxlength="20"
        :placeholder="$t('layer.search.Searchyourgame')"
      />
      <button v-if="showClose" class="text-gray-400 hover:text-gray-200">
        <van-icon
          size="14px"
          @click="clearValue"
          class="cursor-pointer"
          name="cross"
        />
      </button>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  computed,
  nextTick,
  defineAsyncComponent
} from "vue";
import { gameSearch } from "../../api/casion.js";
import { mainAct } from "../../store/activeda";
import { useRouter, useRoute } from "vue-router";
import { gameBusinessList } from "../../api/casion.js";

const props = defineProps(["business_code"]);
const router = useRouter();
const route = useRoute();
const main2 = mainAct();
const gameBox = defineAsyncComponent(() =>
  import("../../components/gameSwiper/gameBox.vue")
);

const showClose = ref(false);
const showLayer = ref(false);
const layerCon = ref(null);
const iptCon = ref(null);
const step = ref(1);
const games = ref([]);

const tagList = ref([
  //  "Mayan","Crazy Time","MM","Sweet Bonanza", "Money"
]);
const goToSearch = e => {
  ipt_val.value = e;
  searchGame();
};
const closeTag = e => {
  //删除tag
  console.log(e);
  tagList.value.splice(e, 1);
};
const clearValue = () => {
  ipt_val.value = "";
  step.value = 1;
  showLayer.value = false;
  showClose.value = false;
};
const clearTag = () => {
  tagList.value = [];
};

const clickInput = async () => {
  showClose.value = true;
  showLayer.value = true;

  // 禁止页面滚动
  document.querySelector(".scrollable").style.overflow = "hidden";

  await nextTick();
  const rect = iptCon.value.getBoundingClientRect();
  const top = rect.top + 55 + "px";
  const left = rect.left + "px";

  layerCon.value.style.left = left;
  layerCon.value.style.top = top;
  layerCon.value.style.width = rect.width + "px";

  await nextTick();
};

const ipt_val = ref(null);
const searchGame = async () => {
  console.log("搜索游戏");
  // 小于三位不显示
  if (ipt_val.value.length < 3) {
    step.value = 1;
    console.log("小于三位不显示");

    return false;
  }
  step.value = 2;
  let data = {
    page: 1,
    page_size: 20,
    variables: ipt_val.value,
    business_code: props.business_code
  };
  console.log("props.api", props.api);

  let res = await gameBusinessList(data);
  if (res.errno == 0) {
    tagList.value.unshift(ipt_val.value);
    //删除小于3的项
    tagList.value = tagList.value.filter(function (item) {
      return item.length >= 3;
    });
    //tag数组去重
    tagList.value = [...new Set(tagList.value)];

    // if (res.data.list.length == 0) {
    //   setTimeout(() => {
    //     step.value = 1;
    //   }, 1000);
    // } else {
    // setTimeout(() => {
    step.value = 3;
    // }, 1000);
    if (ipt_val.value.length < 3) {
      step.value = 1;
      return false;
    }
    // }
    //图片地址转义
    res.data.list.forEach(item => {
      if (!item.img_url.startsWith("http")) {
        item.img_url = main2.static_base_url + item.img_url;
      }
    });
    games.value = res.data.list;
    // console.log(res.data.list);
  }
};

watch(showLayer, (newValue, oldValue) => {
  console.log("监听弹窗状态" + newValue);

  if (!newValue) {
    // 恢复页面滚动
    document.querySelector(".scrollable").style.overflow = "auto";
  }
});

onMounted(() => {});
</script>
<style lang="less" scoped>
.search {
  ::v-deep(.el-input__wrapper) {
    background-color: #0f212e;
    color: white;
    padding: 0 12px;
    box-shadow: unset;
    border-bottom: unset;
    outline: unset;
  }
  ::v-deep(.el-input__inner) {
    color: white;
    height: 22px;
  }
}
@media (max-width: 600px) {
  .gameBox {
    height: 350px !important;
    overflow-y: auto !important;
    grid-gap: 0px 2px !important;
    grid-template-columns: repeat(3, 1fr) !important;

    .item {
      width: 28vw !important;
      max-width: unset;
      min-width: unset;
    }
    .game_loading_div {
      width: 28vw !important;
      height: 36vw !important;
    }
    .star {
      display: block !important;
    }
    .mb {
      opacity: 1 !important;
    }
  }
}
.layerCon {
  overflow-y: auto;
  z-index: 1450;
  /*  width: 1200px; */
  position: fixed;
  inset: 0px auto auto 0px;
  margin: 0px;
  /* transform: translate(475px, 270px); */
}
.tag {
  padding: 2px 4px;
  border-radius: 12cqh;
  background-color: #2f4553;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 10px;
}
::v-deep(.van-overlay) {
  background: rgba(0, 0, 0, 0.4) !important;
}
::v-deep(.van-skeleton) {
  padding: 0 !important;
}
::v-deep(.van-skeleton-image) {
  width: 157px !important;
  height: 210px !important;
}
.gameBox {
  /* background-color: #1a2c38; */
  height: 500px;
  overflow-y: auto;
  display: grid;
  grid-gap: 2rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  .hover-img {
    will-change: transform;
    transition: 0.3s;
  }
  .item .game_loading_div {
    width: 153px;
    color: #fff;
    height: 210px;
    cursor: pointer;
    background-color: #213743;
    text-align: center;
    border-radius: 4px;
  }
  .star {
    display: none;
  }
  .mb {
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 0.3) 25%,
      rgba(0, 0, 0, 0.5) 60%,
      rgba(48, 48, 48, 0.9) 100%
    );
  }

  .item:hover .hover-img {
    transform: translateY(-4%);
    .star {
      display: block;
      z-index: 12;
    }
    .mb {
      opacity: 1;
      transition-duration: 1s;
      transition-property: opacity;
      z-index: 11;
    }
  }
  .greenpoint {
    animation: svelte-tgp09d-pulse 1s infinite ease-out;
  }
  @keyframes svelte-tgp09d-pulse {
    0% {
      box-shadow: 0 0 #00e70166;
    }
    30% {
      box-shadow: 0 0 2px 2px #00e70166;
    }
    70% {
      box-shadow: 0 0 2px 2px #00e70166;
    }
    100% {
      box-shadow: 0 0 #00e70166;
    }
  }
}
</style>
